<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浮动与清除浮动</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#main {
				width: 100%;
				height: 600px;
				background-color: #F5F2E8;
			}
			
			#left {
				/** 浮动 */
				float: left;
				width: 49%;
				height: 100%;
				background-color: #E3D8B4;
				margin-left: 1px;
			}
			
			#right {
				/** 浮动*/
				float: left;
				width: 50%;
				height: 100%;
				background-color: #EDC94B;
			}
			/**row style*/
			
			.rowStyle {
				width: 100%;
				height: 30px;
				background-color: red;
			}
			
			.colStyle {
				width: 33%;
				height: 90%;
				background-color: blue;
			}
			
			div [class="colStyle"] {
				float: left;
				margin-top: 1.5px;
				margin-left: 1px;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="left">
				<div id="row1" class="rowStyle">
					<div id="col1" class="colStyle">

					</div>
					<div id="col2" class="colStyle" style="background-color: yellow;">

					</div>
					<div id="col3" class="colStyle" style="background-color: black;">

					</div>

				</div>

			</div>
			<div id="right"></div>
		</div>
	</body>

</html>